{% extends "base.html" %}
{% load staticfiles %}
{% block title %}用户中心{% endblock %}
{% block css %}
	{% include "common/_stylesheets.html" %}
{% endblock %}

{% block content %}
<div class="">
  <div class="page-title">
      <div class="title_left">
        <h3>账户信息</h3>
      </div>
  </div>
    
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-bars"></i> {{ user.username }} </h2>
        <div class="clearfix"></div>
      </div>
      
      <div class="x_content">
        <div class="" role="tabpanel" data-example-id="togglable-tabs">
          <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
            <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">账户概览</a>
            </li>
            <li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">消费明细</a>
            </li>
            <li role="presentation" class=""><a href="#tab_content3" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">充值明细</a>
            </li>
          </ul>
          <div id="myTabContent" class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
             	<div class="row tile_count">
					  <div class="col-md-2 col-sm-4 col-xs-6">
					    <span class="count_top"><i class="fa fa-user"></i> 账户余额  </span>
					    <div class="count red" style="text-align:center"> {{ user_money }}元 </div>
					  </div>
					  <div class="col-md-2 col-sm-4 col-xs-6">
					    <span class="count_top"><i class="fa fa-clock-o"></i> 累计消费 </span>
					    <div class="count" style="text-align:center"> {{ consume_money }}元 </div>
					  </div>
					  <div class="col-md-2 col-sm-4 col-xs-6">
					    <span class="count_top"><i class="fa fa-laptop"></i> 累计充值 </span>
					    <div class="count green" style="text-align:center"> {{ charge_money }}元 </div>
					  </div>
					  <div class="col-md-2 col-sm-4 col-xs-6">
					    <span class="count_top"><i class="fa fa-tags"></i> 上次消费 </span>
					    <div class="count" style="text-align:center"> {{ latest_consume }}元 </div>
					  </div>
					   <div class="col-md-2 col-sm-4 col-xs-6">
					    <span class="count_top"><i class="fa fa-tasks"></i> 最新充值 </span>
					    <div class="count green" style="text-align:center"> {{ latest_charge }}元 </div>
					  </div>
					 <!-- <div class="col-md-2 col-sm-4 col-xs-6">
					    <span class="count_top"><i class="fa fa-user"></i> 用户数  </span>
					    <div class="count" style="text-align:center"> 5位 </div>
					  </div> -->
				</div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
             
             	 <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
		            <thead>
		            	<tr>
			                <th colspan="1"  rowspan="2" class="text-center">序号</th>
			                <th colspan="5"  class="text-center">费用(元)</th>
			                <th colspan="2" class="text-center">VCPU使用情况</th>
			                <th colspan="2" class="text-center">内存使用情况</th>
			                <th colspan="2" class="text-center">磁盘使用情况</th>
			                <th colspan="1"  rowspan="2" class="text-center">记录形成时间</th>
            			</tr>
		            	<tr>
					  		
					  		
					  		<th class="text-center">VCPU</th>
					  		<th class="text-center">内存</th>
					  		<th class="text-center">磁盘</th>
					  		<th class="text-center">消费总额</th>
					  		<th class="text-center">余额</th>
					  		<th class="text-center">使用量(核*时)</th>
					  		<th class="text-center">单价(元)</th>
					  		<th class="text-center">使用量(GB*时)</th>
					  		<th class="text-center">单价(元)</th>
					  		<th class="text-center">使用量(GB*时)</th>
					  		<th class="text-center">单价(元)</th>
		            	</tr>
		            </thead>
		            <tbody>
		             		{% for list in user_consumption_list %}  
							   	<tr>  
								     <td class="text-center">  {{ list.id }}    </td> 
									 <td class="text-right">  {{ list.cpu_consume_money }} </td>
									 <td class="text-right">  {{ list.memory_consume_money }} </td>
									 <td class="text-right">  {{ list.disk_consume_money }} </td>
									 <td class="text-right" style="color:red;">  {{ list.consume_money }}    </td>
									 <td class="text-right" style="color:red;">  {{ list.remaining_money }}</td>
								     <td class="text-center">  {{ list.cpu_use_count }} </td> 
								     <td class="text-right">  {{ list.cpu_price }} </td> 
								     <td class="text-center">  {{ list.memory_use_count }} </td> 
								     <td class="text-right">  {{ list.memory_price }} </td> 
								     <td class="text-center">  {{ list.disk_use_count }} </td> 
								     <td class="text-right">  {{ list.disk_price }} </td>
								     <td class="text-center">  {{ list.record_time }} </td> 
							  	 </tr>  
						   {% endfor %}  
		            </tbody>
		          </table>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">
                   <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
			            <thead>
			               <tr >
			               		<th class="text-center">序号</th>
			               		<th class="text-center">订单编号</th>
						  		<th class="text-center">项目名称</th>
						  		<th class="text-center">用户名</th>
						  		<th class="text-center">充值金额(元)</th>
						  		<th class="text-center">充值时间</th>
						  		<th class="text-center">充值状态</th>
             			 </tr>
            		</thead>
            	<tbody>
            		{% for list in user_charge_list %}  
				   		<tr>  
					   	  <td class="text-center">  {{ list.id }}    </td> 
					      <td class="text-center">  {{ list.orderId }}    </td>
					      <td class="text-center">  {{ list.project_name }}  </td>
					      <td class="text-center">  {{ list.username }}    </td>
					      <td class="text-right" style="color:red;">  {{ list.txnAmt }}    </td> 
					      <td class="text-center">  {{ list.txnTime }}    </td> 
					      <td class="text-center"> 
					     	{% if list.status == 0  %}
							 	<a href="">
									未完成
								</a> 
							{% else %}
							   <a href="">
									完成
								</a>
							{% endif %}
						</td>  
				  	 </tr>  
			   {% endfor %}  
            </tbody>
          </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block js %} 
	{% include "common/_js.html" %}
{% endblock %}
